<template>
  <div class="hotel">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
      <el-breadcrumb-item>酒店预订</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 查看价格组件 -->
    <PriceCheck />

    <!-- 区域/均价/地图组件 -->
    <Area :cityItem="item" v-for="item in currentCity" :key="item.id" />

    <!-- 筛选列表组件 -->
    <SelectionList />

    <!-- 酒店列表组件 -->
    <hotelList />
  </div>
</template>

<script>
import PriceCheck from "@/components/hotel/priceCheck";
import Area from "@/components/hotel/area";
import SelectionList from "@/components/hotel/selectionList";
import HotelList from "@/components/hotel/hotelList";

export default {
  components: {
    PriceCheck,
    Area,
    SelectionList,
    HotelList
  },

  data() {
    return {
      currentCity: ""
    };
  },

  created() {
    this.$axios({
      url: "/cities",
      params: {
        name: "广州"
      }
    }).then(res => {
      console.log("查找城市", res);

      this.currentCity = res.data.data;
      console.log("当前城市", this.currentCity[0].name);
    });

    this.$axios({
      url: "/hotels",
      params: {
        city: 197
      }
    }).then(res => {
      console.log('酒店详情城市的返回结果',res);
    });
  }
};
</script>

<style scoped lang="less">
.hotel {
  width: 960px;
  margin: 20px auto;
  .priceCheck {
    margin: 20px 0;
  }
}
</style>